<template>
  <div class="content">
    <div class="cloud-header">
      <h2>扩展绑定</h2>
    </div>
    <div class="cloud-body">
      <div class="cloud-body-table">
        <table class="table" cellspacing="0">
          <thead class="thead">
            <tr>
              <th class="table_cell">类目</th>
              <th class="table_cell tl">功能</th>
              <th class="table_cell tl interface js_interface">接口</th>
              <th class="table_cell tr drop_left_border limit">实时调用量/上限 <i class="icon_msg_mini ask js_tips"></i></th>
              <th class="table_cell tl drop_left_border status">接口状态</th>
              <th class="table_cell last_child drop_left_border oprate">操作</th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr>
              <td class="table_cell drop_left_border" rowspan="23">码农云服务</td>
              <td class="table_cell tl" rowspan="2">基础支持</td>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140183&amp;token=&amp;lang=zh_CN" target="_blank" title="获取authorization">获取authorization</a></td>
              <td class="table_cell tr drop_left_border">无限制</td>
              <td class="table_cell tl drop_left_border status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell last_child drop_left_border">&nbsp;</td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140187&amp;token=&amp;lang=zh_CN" target="_blank" title="获取服务器IP地址">获取服务器IP地址</a></td>
              <td class="table_cell tr drop_left_border">无限制</td>
              <td class="table_cell tl drop_left_border status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell last_child drop_left_border">&nbsp;</td>
            </tr>
            <tr>
              <td class="table_cell tl" rowspan="5">小程序</td>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140453&amp;token=&amp;lang=zh_CN" target="_blank" title="微信小程序">微信小程序</a></td>
              <td class="table_cell tr drop_left_border">
                <DropdownCustom class-name="h-text-dropdown" :toggleIcon="false" placement="bottom">
                  <span>{{weappList.length}}/10</span>
                  <div slot="content" v-width="280">
                    <div v-padding="20">
                      <ul class="weappList">
                        <li v-for="(item, index) in weappList" :key="index">
                          AppID:<span v-popup.newBind="item" :id="item.AppID">{{item.AppID}}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </DropdownCustom>
              </td>
              <td class="table_cell tl drop_left_border status">
                <span class="mini_tips icon_after">待设置</span>
              </td>
              <td class="table_cell last_child drop_left_border">
                <a href="javascript:;" id="voiceOpenWeapp" v-popup.newBind="weapp">设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140453&amp;token=&amp;lang=zh_CN" target="_blank" title="支付宝小程序">支付宝小程序</a></td>
              <td class="table_cell drop_left_border tr">2</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">待设置</span>
              </td>
              <td class="table_cell drop_left_border last_child">
                <a href="javascript:;" id="voiceOpen">设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140454&amp;token=&amp;lang=zh_CN" target="_blank" title="百度小程序">百度小程序</a>
                <span id="voiceTxt">(已关闭)</span>
              </td>
              <td class="table_cell drop_left_border tr">-</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">待开放</span>
              </td>
              <td class="table_cell drop_left_border last_child">&nbsp;</td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140454&amp;token=&amp;lang=zh_CN" target="_blank" title="QQ小程序">QQ小程序</a>
                <span id="voiceTxt">(已关闭)</span>
              </td>
              <td class="table_cell drop_left_border tr">-</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">待开放</span>
              </td>
              <td class="table_cell drop_left_border last_child">&nbsp;</td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140453&amp;token=&amp;lang=zh_CN" target="_blank" title="抖音小程序">抖音小程序</a>
                <span id="voiceTxt">(已关闭)</span>
              </td>
              <td class="table_cell drop_left_border tr">-</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">待开放</span>
              </td>
              <td class="table_cell drop_left_border last_child">
                <!--  <a href="javascript:;" id="voiceClose" style="display: none;">关闭</a>
                <a href="javascript:;" id="voiceOpen">开启</a> -->
              </td>
            </tr>
            <tr>
              <td class="table_cell tl" rowspan="5">微信开发</td>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140453&amp;token=&amp;lang=zh_CN" target="_blank" title="微信小程序">微信小程序</a></td>
              <td class="table_cell tr drop_left_border">
                <DropdownCustom class-name="h-text-dropdown" :toggleIcon="false" placement="bottom">
                  <span>{{weappList.length}}/10</span>
                  <div slot="content" v-width="280">
                    <div v-padding="20">
                      <ul class="weappList">
                        <li v-for="(item, index) in weappList" :key="index">
                          AppID:<span v-popup.newBind="item" :id="item.AppID">{{item.AppID}}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </DropdownCustom>
              </td>
              <td class="table_cell tl drop_left_border status">
                <span class="mini_tips icon_after">待设置</span>
              </td>
              <td class="table_cell last_child drop_left_border">
                <a href="javascript:;" id="voiceOpenWeapp" v-popup.newBind="weapp">设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140547&amp;token=&amp;lang=zh_CN" target="_blank" title="微信服务器文件解析">微信服务器文件解析</a></td>
              <td class="table_cell drop_left_border tr">无上制</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child">
                <a href="javascript:;" id="voiceOpen" v-popup.wechatFile>设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140549&amp;token=&amp;lang=zh_CN" target="_blank" title="扫普通链接二维码打开小程序">扫普通链接二维码打开小程序</a></td>
              <td class="table_cell drop_left_border tr">无上制</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child">
                <a href="javascript:;" id="voiceOpen" v-popup.weappQrcode>查看</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1433751277&amp;token=&amp;lang=zh_CN" target="_blank" title="绑定银联支付">微信公众号</a></td>
              <td class="table_cell drop_left_border tr">
                <DropdownCustom class-name="h-text-dropdown" :toggleIcon="false" placement="bottom">
                  <span>{{wechatList.length}}/10</span>
                  <div slot="content" v-width="280">
                    <div v-padding="20">
                      <ul class="weappList">
                        <li v-for="(item, index) in wechatList" :key="index">
                          AppID:<span v-popup.newBind="item" :id="item.AppID">{{item.AppID}}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                </DropdownCustom>
              </td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child">
                <a href="javascript:;" id="voiceOpenWechat" v-popup.newBind="wechat">设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1500374289_66bvB" target="_blank">微信第三方平台</a></td>
              <td class="table_cell drop_left_border tr">1/1</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child">
                <a href="javascript:;" id="voiceOpen" v-popup.wechatService>配置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl" rowspan="5">用户管理</td>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140837&amp;token=&amp;lang=zh_CN" target="_blank" title="用户分组管理">用户分组管理</a></td>
              <td class="table_cell drop_left_border tr dropdown_closed">
                <span class="mini_tips icon_after js_api_detail" data-id="tpl_detail_group">
                  详情<span class="icon_dropdown_switch"><i class="arrow arrow_up"></i><i class="arrow arrow_down"></i></span>
                </span>
              </td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child"><a href="javascript:;" class="js_reset" style="display:none;" data-group="tpl_detail_group" data-name="group_addr">调用量清零</a></td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140838&amp;token=&amp;lang=zh_CN" target="_blank" title="设置用户备注名">设置用户备注名</a></td>
              <td class="table_cell drop_left_border tr">20</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child"><a href="javascript:;" class="js_reset" style="display:none;" data-quota="20" data-name="api_updateremark">调用量清零</a></td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140839&amp;token=&amp;lang=zh_CN" target="_blank" title="获取用户基本信息">获取用户基本信息</a></td>
              <td class="table_cell drop_left_border tr">0/50000000</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child"><a href="javascript:;" class="js_reset" style="display:none;" data-quota="0/50000000" data-name="api_userinfo">调用量清零</a></td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140840&amp;token=&amp;lang=zh_CN" target="_blank" title="获取用户列表">获取用户列表</a></td>
              <td class="table_cell drop_left_border tr">0/1000</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child"><a href="javascript:;" class="js_reset" style="display:none;" data-quota="0/1000" data-name="api_getfans">调用量清零</a></td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1421140841&amp;token=&amp;lang=zh_CN" target="_blank" title="获取用户地理位置">获取用户地理位置</a><span id="localTxt">(已关闭)</span></td>
              <td class="table_cell drop_left_border tr">
                &nbsp;
                无上限 </td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell drop_left_border last_child">
                &nbsp;
                <a href="javascript:;" id="locationBt">开启</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl" rowspan="4">开发者绑定</td>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1443433542&amp;token=&amp;lang=zh_CN" target="_blank" title="微信开发者">微信开放平台-移动应用</a></td>
              <td class="table_cell drop_left_border tr">2</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell last_child drop_left_border">
                <a href="javascript:;" id="voiceOpen">设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1443433600&amp;token=&amp;lang=zh_CN" target="_blank" title="支付宝开发者">微信开放平台-网站应用</a></td>
              <td class="table_cell drop_left_border tr">2</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell last_child drop_left_border">
                <a href="javascript:;" id="voiceOpen">设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1443433600&amp;token=&amp;lang=zh_CN" target="_blank" title="支付宝开发者">支付宝开放平台-网站应用</a></td>
              <td class="table_cell drop_left_border tr">2</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell last_child drop_left_border">
                <a href="javascript:;" id="voiceOpen">设置</a>
              </td>
            </tr>
            <tr>
              <td class="table_cell tl interface js_interface"><a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&amp;id=mp1443433600&amp;token=&amp;lang=zh_CN" target="_blank" title="支付宝开发者">支付宝开放平台-网站应用</a></td>
              <td class="table_cell drop_left_border tr">2</td>
              <td class="table_cell drop_left_border tl status">
                <span class="mini_tips icon_after">已获得</span>
              </td>
              <td class="table_cell last_child drop_left_border">
                <a href="javascript:;" id="voiceOpen">设置</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      weapp: {
        AppID: '',
        AppSecret: '',
        mch_id: '',
        partnerKey: '',
        app_pay: '',
        store_id: '',
        model: 'weapp'
      },
      wechat: {
        AppID: '',
        AppSecret: '',
        mch_id: '',
        app_pay: '',
        store_id: '',
        partnerKey: '',
        URL: '',
        Token: '',
        EncodingAESKey: '',
        model: 'wechat'
      },
      wechatList: [],
      weappList: []
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.handleApplyInfo();
  },
  methods: {
    handleApplyInfo() {
      this.$cloud.apply().get(this.$cloud.AppID).then(res => {
        console.log('获取完整配置', res.config.options);
        for (let i in res.config.options) {
          let item = res.config.options[i];
          if (item.model) {
            if (item.model == 'wechat') {
              this.wechatList.push(item);
            }
            if (item.model == 'weapp') {
              this.weappList.push(item);
            }
          }
        }
      }).catch(error => {
        console.log('错误', error);
      });
    }
  }
};

</script>
<style type="text/css">
.weappList li {
  line-height: 35px;
}

.weappList li span {
  padding-left: 10px;
}

</style>
